<template>
	<view class="refund">
		<view class="refund-head">
			<view class="order-content">
				<image class="service-image" src="/static/images/nav-tag-1.png" mode="aspectFill"></image>
				<view class="order-info">
					<text class="service-name">{{ orderData.serviceName }}</text>
					<view class="detail-item">
						<text class="label">上门时间：</text>
						<text class="value">{{ orderData.serviceTime }}</text>
					</view>
					<view class="detail-item">
						<text class="label">项目时间：</text>
						<text class="value">{{ orderData.duration }}</text>
					</view>
					<view class="detail-item">
						<text class="label">项目价格：</text>
						<text class="price">¥{{ orderData.price }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="refund-explain">
			<text class="title">退款说明</text>
			<view class="explainView">
				<text class="exTitle">可退款项</text>
				<view class="view_view">
					<text>实付款</text>
					<text>￥248.00</text>
				</view>
			</view>
			<view class="explainAccount">
				<text>退回账户</text>
				<text>原支付账户</text>
			</view>
			<view class="explainDay">
				<text>1-3个工作日</text>
				<text>内到账</text>
			</view>
		</view>
		<view class="refund-cause">
			<view class="title">
				<text>退款原因</text>
				<text class="title_text">（必填）</text>
			</view>
			<view class="container">
				<u-radio-group v-model="radioVal" placement="column" iconPlacement="right">
					<u-radio activeColor="rgba(68, 212, 168, 1)" v-for="item in radioList" :label="item.name"
						:name="item.id" borderBottom="true" labelColor="rgba(54, 68, 79, 1)" labelSize="14"
						iconSize="16" :key="item.id"></u-radio>
				</u-radio-group>
			</view>
		</view>
		<view class="commonBtn" @tap="goto('pages/order/refundProgress')">
			<view class="btnCon">
				<text>申请退款</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderData: {
					orderNo: 'DSA41634646464646476',
					status: '代付款',
					serviceImage: '/static/images/service-demo.jpg',
					serviceName: '全身理疗按摩',
					serviceTime: '2025-03-06 09:00',
					duration: '60分钟',
					price: '248.00'
				},
				radioList: [{
					id: 1,
					name: "重新购买"
				}, {
					id: 2,
					name: "商家无法提供服务"
				}, {
					id: 3,
					name: "店铺/商品信息问题"
				}, {
					id: 4,
					name: "价格不划算"
				}, {
					id: 5,
					name: "不需要了"
				}, ],
				radioVal: 1
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* #ifdef H5 */
	page {
		position: relative;
		height: 100%;
		background-color: #F6F8FC;
	}
	/* #endif */
	
	.refund {
		position: relative;
		height: 100%;
		background-color: #F6F8FC;
		padding-top: 24rpx;

		.refund-head {
			padding: 24rpx;
			background: #fff;
			margin: 0 24rpx;
			border-radius: 24rpx;

			.order-content {
				display: flex;

				.service-image {
					width: 160rpx;
					height: 160rpx;
					border-radius: 12rpx;
					margin-right: 24rpx;
					background-color: #f0f0f0;
				}

				.order-info {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.service-name {
						font-size: 32rpx;
						font-weight: 600;
						color: #333333;
						margin-bottom: 16rpx;
					}

					.detail-item {
						display: flex;
						align-items: center;
						margin-bottom: 8rpx;
						font-size: 22rpx;
						color: rgba(94, 103, 110, 1);

						.label {}

						.value {}

						.price {}
					}
				}
			}
		}

		.refund-explain {
			padding: 24rpx;
			background: #fff;
			margin: 24rpx;
			border-radius: 24rpx;

			.title {
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(54, 68, 79, 1);
				display: flex;
				align-items: center;
			}

			.explainView {
				border-radius: 8px;
				background: rgba(246, 248, 252, 1);
				padding: 24rpx;
				margin: 16rpx 0 32rpx;

				.exTitle {
					font-size: 24rpx;
					font-weight: 500;
					color: rgba(54, 68, 79, 1);
				}

				.view_view {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(94, 103, 110, 1);
					margin-top: 16rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
			}

			.explainAccount {
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(54, 68, 79, 1);
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.explainDay {
				display: flex;
				justify-content: flex-end;
				margin-top: 4rpx;
				font-size: 20rpx;

				text:nth-child(1) {
					color: rgba(255, 140, 64, 1);
				}

				text:nth-child(2) {
					color: rgba(152, 160, 166, 1);
					margin-left: 6rpx;
				}
			}

		}

		.refund-cause {
			@extend .refund-explain;

			.title_text {
				font-size: 20rpx;
				font-weight: 400;
				color: rgba(152, 160, 166, 1);
			}

			.container {
				margin-top: 24rpx;
			}

		}
	}

	::v-deep .u-radio {
		padding: 24rpx 0;
		border-bottom: 2rpx solid #f5f5f5;
	}

	::v-deep .u-radio:last-child {
		padding: 24rpx 0 0;
		border-bottom: none;
	}
</style>